<template>
    <div class="img-ipt-url">
        <slot name="left"></slot>
        <em
            class="close"
            @click="removeList({
                index: modulesIndex,
                listIndex
            })"
            v-if="!hideClose">
            <i-icon type="android-close"></i-icon>
        </em>
        <i-form class="img-ipt-url__form">
            <i-form-item label="描述：">
                <i-input v-model="title" placeholder="添加标题"></i-input>
            </i-form-item>
            <i-form-item label="链接：">
                <span class="link-name" :class="{select: url}">
                    <em class="close" @click="clearLink">
                        <i-icon type="android-close"></i-icon>
                    </em>
                    请选择
                </span>
                <i-dropdown
                    trigger="click"
                    @on-click="clickUpdate">
                    <a href="javascript:void(0)">
                        修改
                    </a>
                    <i-dropdown-menu slot="list">
                        <i-dropdown-item
                            v-for="(item, index) in updateDropdown"
                            :name="item"
                            :key="index">
                            {{ item }}
                        </i-dropdown-item>
                    </i-dropdown-menu>
                </i-dropdown>
            </i-form-item>
        </i-form>
    </div>
</template>

<script>
// mapActions
import { mapState, mapActions } from 'vuex'

// mixins update attr
import UpdateAttr from '@/admin/mixins/update-attr'

export default {
    name: 'img-ipt-url',
    mixins: [UpdateAttr],
    props: {
        /**
         * modules index
         */
        modulesIndex: {
            type: Number
        },
        /**
         * list index
         */
        listIndex: {
            type: Number
        },
        /**
         * 是否显示关闭按钮
         */
        hideClose: {
            type: Boolean
        }
    },
    data() {
        return {
            updateDropdown: ['功能页面', '营销活动', '商品分类', '商品分类', '文章分类', '自定义页面']
        }
    },
    computed: {
        ...mapState('viusal', ['modules']),
        /**
         * list
         */
        list: {
            get() {
                return this.modules[this.modulesIndex].data.list[this.listIndex]
            },
            /**
             * 统一处理 list set
             *
             * @param {String} value - 新的值
             * @param {String} attrName - 属性值
             */
            set({ value, attrName }) {
                this._updateDataAttr({
                    belong: 'list',
                    value,
                    attrName
                })
            }
        },
        /**
         * 标题
         */
        title: {
            get() {
                return this.list.title || ''
            },
            set(value) {
                this.list = {
                    value,
                    attrName: 'title'
                }
            }
        },
        /**
         * 地址
         */
        url: {
            get() {
                return this.list.url || ''
            },
            set(value) {
                this.list = {
                    value,
                    attrName: 'url'
                }
            }
        }
    },
    methods: {
        ...mapActions('viusal', ['updateDataAttr', 'removeList']),
        clickUpdate(name) {
            console.log(name)
        },
        /**
         * 清空当前选中的链接
         */
        clearLink() {
            let arr = ['url', 'urlCatetory', 'urlName']
            arr.forEach(item => {
                this.list = {
                    value: '',
                    attrName: item
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.img-ipt-url {
    position: relative;
    display: flex;
    border: 1px solid @border-color-split;
    padding: @gap;
    border-radius: 4px;
    margin-bottom: 16px;
    .ivu-form-item-label {
        width: 60px;
    }
    &:hover {
        > em.close {
            display: flex;
        }
    }
}
.img-ipt-url__form {
    flex: 1;
}
.link-name {
    padding: 6px 8px;
    color: #fff;
    border-radius: 6px;
    background: #aaa;
    margin-right: 8px;
    position: relative;
    em {
        display: none;
    }
    &.select {
        background: @primary-color;
        &:hover {
            em {
                display: flex;
            }
        }
    }
}
.a-link {
    font-size: 13px;
}
em.close {
    display: none;
    cursor: pointer;
    color: #fff;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: -6px;
    top: -6px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.3);
    &:hover {
        background: rgba(0, 0, 0, 0.4);
    }
}
</style>